<template>
  <div id="paas_content">
    <el-dialog
      title="政策信息"
      :visible.sync="piliticsDialog"
      width="30%"
      center
      :before-close="handleClose"
    >
      <el-form
        ref="organizationReport"
        :model="piliticsReport"
        :rules="rules"
        label-width="80px"
        label-position="left"
      >
        <el-row>
          <el-col>
            <el-form-item label="来源" prop="source">
              <el-input v-model="piliticsReport.source" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="名称" prop="fullName">
              <el-input v-model="piliticsReport.fullName" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="简称" prop="name">
              <el-input v-model="piliticsReport.name" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="piliticsReport.content" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="文件上传">
              <el-upload
                class="upload-demo"
                :action="actions"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="successFile"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :disabled="viewMessage"
                :before-upload="beforeUpload"
              >
                <el-button size="small" type="primary" v-show="!viewMessage">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="piliticsReport.contactPerson" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="piliticsReport.contactPhone" :disabled="viewMessage"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="起止日期" prop="date">
              <el-date-picker
                v-model="piliticsReport.date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :disabled="viewMessage"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="启用" prop="delivery">
              <el-switch v-model="piliticsReport.status" :disabled="viewMessage"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <button-page :button-list="data.button"></button-page>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["piliticsDialog", "data", "viewMessage"],
  name: "addPilitics",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback();
      } else {
        if (
          !/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(
            value
          )
        ) {
          callback(new Error("请输入正确的手机号"));
        }
        callback();
      }
    };
    return {
      piliticsReport: {
        status: true
      },
      rules: {
        source: [{ max: 10, message: "不得超出10个字符", trigger: "blur" }],
        fullName: [
          { required: true, message: "请输入名称！", trigger: "blur" },
          { max: 30, message: "不得超出30个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入简称！", trigger: "blur" },
          { max: 10, message: "不得超出10个字符", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入内容！", trigger: "blur" },
          { max: 50, message: "不得超出50个字符", trigger: "blur" }
        ],
        contactPerson: [
          { max: 10, message: "不得超出10个字符", trigger: "blur" }
        ],
        contactPhone: [{ validator: validatePhone, trigger: "blur" }],
        date: [{ required: true, message: "请选择日期！", trigger: "blur" }],
      },
      actions: `${process.env.VUE_APP_BASEAPI}/commons/attachment/upload`,
      fileList: [],
      fileId: null,
      isFormat: false
    };
  },
  created() {
    if (this.data.data) {
      let arr = [];
      this.piliticsReport = this.data.data;
      if (this.data.data.status === 117) {
        this.piliticsReport.status = false;
      } else {
        this.piliticsReport.status = true;
      }
      if (this.data.data.declareStarttime) {
        arr[0] = this.data.data.declareStarttime;
        arr[1] = this.data.data.declareEndtime;
        this.$set(this.piliticsReport, "date", arr);
      }
      if (this.data.attachment) {
        this.fileList.push({
          name: this.data.attachment.title,
          src: this.data.attachment.path
        });
        this.fileId = this.data.attachment.id;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("getDialogStatus");
    },
    //提交
    submit_btn(btn) {
      this.$refs["organizationReport"].validate(valid => {
        if (valid) {
          let obj = Object.assign({}, this.piliticsReport);
          if (obj.date) {
            obj.declareStartTime = obj.date[0];
            obj.declareEndTime = obj.date[1];
          }
          obj.policyPath = this.fileId;
          if (obj.status) {
            obj.status = 116;
          } else {
            obj.status = 117;
          }
          this.$post(btn.uri, obj).then(res => {
            if (res.data.state === "ok") {
              this.$message.success(res.data.message);
              this.$emit("getDialogStatus", true);
            }
          });
        }
      });
    },
    successFile(res) {
      this.fileId = res.id;
    },
    handleRemove() {
      this.fileId = null;
    },
    handlePreview(file) {
      if (file.response) {
        window.open(
          `${this.GLOBAL.websiteMessage.sysInfo.fileDomainName}` +
            file.response.src
        );
      } else {
        window.open(
          `${this.GLOBAL.websiteMessage.sysInfo.fileDomainName}` + file.src
        );
      }
    },
    handleExceed() {
      this.$message.error(`当前限制上传 1 个文件`);
    },
    beforeUpload(file) {
      const fileType = [
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/pdf"
      ];
      this.isFormat = fileType.includes(file.type); //图片格式
      const isLtSize = file.size / 1024 / 1024 < 30; //小于30M
      if (!this.isFormat) {
        this.$message.error("上传文件只能是 DOC、DOCX或PDF 格式!");
      }
      if (!isLtSize) {
        this.$message.error("上传文件大小不能超过 30M!");
      }
      return this.isFormat && isLtSize;
    },
    beforeRemove(file) {
      if (!this.isFormat) {
        return "";
      }
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-upload-list {
  display: inline-block;
  vertical-align: top;
  .el-upload-list__item-status-label {
    top: 8px;
  }
  .el-upload-list__item .el-icon-close {
    top: 10px;
  }
}
/deep/.el-cascader {
  width: 100%;
}
/deep/.el-date-editor{
  width: 100%;
}
/deep/.el-icon-close-tip {
  display: none !important;
}
</style>
